<template>
    <a-layout style="height: 100%;">
        <a-layout style="height: 100%;">
            <a-layout-content class="relative">
                <content-edit />
            </a-layout-content>
            <a-layout-sider :width="dataviewLayoutState.isShowSetting ? 350 : 0" class="form-config">
                <a-tabs v-if="!selectTarget" type="card" class="tabs-box">
                    <a-tab-pane v-for="item in globalTabList" :key="item.key">
                        <template #tab>
                            <a-space>
                                <span>{{ item.title }}</span>
                                <icon :icon="item.icon" />
                            </a-space>
                        </template>
                        <div class="tabs-content">
                            <component :is="item.render" />
                        </div>
                    </a-tab-pane>
                </a-tabs>
                <a-tabs v-if="selectTarget" v-model:activeKey="tabsSelect" type="card">
                    <a-tab-pane v-for="item in selectTarget.isGroup ? chartsDefaultTabList : chartsTabList"
                        :key="item.key">
                        <template #tab>
                            <a-space>
                                <span>{{ item.title }}</span>
                                <icon :icon="item.icon" />
                            </a-space>
                        </template>
                        <div class="tabs-content">
                            <component :is="item.render" />
                        </div>
                    </a-tab-pane>
                </a-tabs>
            </a-layout-sider>
        </a-layout>
    </a-layout>
</template>

<script setup lang="ts">
import { storeToRefs } from 'pinia';
import contentEdit from '../contentEdit/index.vue'
import { useDataViewLayoutStore } from '@/stores/dataviewLayout';
import { computed, ref } from 'vue';
import { useDataViewStore } from '@/stores/dataview';
import icon from '@/components/Iconify/index.vue'
import { loadAsyncComponent } from '@/utils/component';

const page = loadAsyncComponent(() => import('./components/page/index.vue'))
const setting = loadAsyncComponent(() => import('./components/setting/index.vue'))
const data = loadAsyncComponent(() => import('./components/data/index.vue'))
const event = loadAsyncComponent(() => import('./components/event/index.vue'))
const animation = loadAsyncComponent(() => import('./components/animation/index.vue'))

const dataviewLayoutStore = useDataViewLayoutStore();
const { dataviewLayoutState } = storeToRefs(dataviewLayoutStore);
const dataViewStore = useDataViewStore()
const { dataviewState } = storeToRefs(dataViewStore)

enum TabsEnum {
    PAGE_SETTING = 'pageSetting',
    CHART_SETTING = 'chartSetting',
    CHART_ANIMATION = 'chartAnimation',
    CHART_DATA = 'chartData',
    CHART_EVENT = 'chartEvent'
}
const tabsSelect = ref(TabsEnum.CHART_SETTING);


// 页面设置
const globalTabList = [
    {
        key: TabsEnum.PAGE_SETTING,
        title: '页面配置',
        icon: 'material-symbols:auto-stories-rounded',
        render: page //渲染组件
    }
]

// 默认所有图表或者分组都具备的
const chartsDefaultTabList = [
    {
        key: TabsEnum.CHART_SETTING,
        title: '定制',
        icon: "material-symbols:construction",
        render: setting
    },
    {
        key: TabsEnum.CHART_ANIMATION,
        title: '动画',
        icon: "material-symbols:cannabis",
        render: animation
    }
]

const chartsTabList = [
    ...chartsDefaultTabList,
    {
        key: TabsEnum.CHART_DATA,
        title: '数据',
        icon: "material-symbols:charger",
        render: data
    },
    {
        key: TabsEnum.CHART_EVENT,
        title: '事件',
        icon: "material-symbols:doorbell-3p",
        render: event
    }
]

const selectTarget = computed(() => {
    const selectId = dataviewState.value.targetChart.selectId
    if (selectId.length !== 1) return undefined //排除多个
    const target = dataviewState.value.componentList[dataViewStore.fetchTargetIndex()]
    if (target?.isGroup) {
        // 分组情况
        tabsSelect.value = TabsEnum.CHART_SETTING
    }
    return target
})

</script>

<style lang="scss" scoped>
.form-config {
    background-color: #fff;
    padding: 5px;
}

:deep(.ant-tabs-nav-wrap) {
    .ant-tabs-nav-list {
        display: flex;
        width: 100%;

        .ant-tabs-tab {
            flex: 1;
            padding: 5px !important;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    }
}

.tabs-content {
    height: calc(100vh - 104px);
    overflow-y: auto;
    scrollbar-gutter: stable;
    overflow-x: hidden;

    &::-webkit-scrollbar {
        width: 6px;
        background: transparent;
        opacity: 0;
        transition: opacity 0.3s;
    }

    &:hover::-webkit-scrollbar {
        opacity: 1;
    }

    &::-webkit-scrollbar-corner,
    &::-webkit-scrollbar-thumb,
    &::-webkit-scrollbar-track {
        border-radius: 4px;
    }

    &::-webkit-scrollbar-corner,
    &::-webkit-scrollbar-track {
        background-color: transparent;
    }

    &::-webkit-scrollbar-thumb {
        background-color: transparent;
    }

    &:hover::-webkit-scrollbar-thumb {
        background-color: #a19e9e;

        &:hover {
            background-color: #ccc;
        }
    }
}
</style>